/** * @description: 非课堂请假 */
<template>
  <div class="pub-container">
    <div class="floor">
      <h6>课堂请假统计</h6>
      <div class="content">
        <div class="content-left">
          <p>申请总数</p>
          <h5>24568</h5>
        </div>

        <div class="content-right">
          <p>
            <label>未扫码离校人数</label>
            <span>2456</span>
          </p>
          <p>
            <label>校外学生人数</label>
            <span>2456</span>
          </p>
          <p>
            <label>通过次数</label>
            <span>2456</span>
          </p>
          <p>
            <label>已完结请假次数</label>
            <span>2456</span>
          </p>
        </div>
      </div>
    </div>

    <!-- 离校状态 -->
    <PieEchart
      pieShowId="leaveSchoolType"
      :optionData="leaveSchoolTypeData"
      :colorList="leaveSchoolTypeColorList"
      :lengendPlace="leaveSchoolTypeLengendPlace"
      pieTitleText="学生总数 "
      titleText="离校状态"
    />

    <!-- 目的地占比 -->
    <PieEchart
      pieShowId="destination"
      :optionData="destinationData"
      :colorList="destinationColorList"
      :lengendPlace="destinationLengendPlace"
      pieTitleText="总数 "
      titleText="目的地占比"
    />

    <!-- 五困生占比 -->
    <PieEchart
      pieShowId="fiveHard"
      :optionData="fiveHardData"
      :colorList="fiveHardColorList"
      :lengendPlace="fiveHardLengendPlace"
      pieTitleText="总数"
      titleText="五困生占比"
    />
  </div>
</template>

<script>
import PieEchart from '@/components/pieEchart'
export default {
  name: 'NoClassroomLeave',
  components: { PieEchart },
  data() {
    return {
      //离校状态
      leaveSchoolTypeColorList: ['#FF7483', '#21A6FB', '#2CCDA8'],
      leaveSchoolTypeData: [
        {
          name: '未扫码离校',
          value: 0,
        },
        {
          name: '离校中',
          value: 0,
        },
        {
          name: '已返校签到',
          value: 0,
        },
      ],
      leaveSchoolTypeLengendPlace: { top: '33%', left: '65%' },

      //目的地占比
      destinationColorList: ['#2CCDA8', '#21A6FB', '#2E6CF6'],
      destinationData: [
        {
          name: '离校未出市',
          value: 0,
        },
        {
          name: '出市未出省',
          value: 0,
        },
        {
          name: '出市出省',
          value: 0,
        },
      ],
      destinationLengendPlace: { top: '33%', left: '65%' },

      //五困生占比
      fiveHardColorList: ['#2CCDA8', '#2181FB'],
      fiveHardData: [
        {
          name: '五困生',
          value: 0,
        },
        {
          name: '非五困生',
          value: 0,
        },
      ],
      fiveHardLengendPlace: { top: '38%', left: '65%' },
    }
  },
}
</script>

<style lang="scss" scoped>
.floor {
  background: $bg-white;
  padding: 20px 12px;
  border-radius: 10px;
  margin-top: 12px;
  h6 {
    font-size: $fz16;
    color: $color-title;
  }
}
.content {
  margin-top: 16px;
  display: flex;
  font-size: $fz14;
  &-left {
    width: 155px;
    height: 190.5px;
    background: url('../../assets/images/leaveStatisticsTotal_bg.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    padding-left: 16px;
    p {
      position: absolute;
      bottom: 62.5px;
      font-size: $fz16;
    }
    h5 {
      position: absolute;
      bottom: 16px;
      font-size: 28px;
      font-weight: bold;
    }
  }
  &-right {
    flex: 1;
    margin-left: 10px;
    p {
      height: 40px;
      line-height: 40px;
      background: #f5fdf2;
      padding: 0 12px;
      display: flex;
      justify-content: space-between;
      label {
        font-size: $fz13;
      }
      span {
        font-weight: bold;
        font-size: 20px;
      }
    }
    p + p {
      margin-top: 10px;
    }
    p:nth-child(2) {
      background: #fdf3ed;
    }
    p:last-child {
      background: #faf0f4;
    }
  }
}
</style>
